<template>
  <div class="statistics">
    <van-nav-bar title="访问统计" />
    <div class="m-t10 m-l10">
      <van-cell-group>
        <van-cell title="总访问量" :value="datas[0] && datas[0]['totalCount']"/>
        <van-cell title="访问人数" :value="datas[0] && datas[0]['sameTotal']" />
        <van-cell title="问卷提交人数" :value="datas[0] && datas[0]['passCount']" />
      </van-cell-group>
        <excel class="m-t50 txt-c" @handleExcel="handleExcel"
                :json="datas">
            <p slot="Exceltxt">导出Excel表格</p>
        </excel>
    </div>
  </div>
</template>

<script>
// let datas = [{
//     name: '路人甲',
//     phone: '123456789',
//     email: '000@123456.com'
// }, {
//     name: '炮灰乙',
//     phone: '123456789',
//     email: '000@123456.com'
// }, {
//     name: '土匪丙',
//     phone: '123456789',
//     email: '000@123456.com'
// }, {
//     name: '流氓丁',
//     phone: '123456789',
//     email: '000@123456.com'
// },]

import {statistics} from '@/services/index'
import excel from '@/components/excel.vue'
import download from '@/utils/excel.js'
export default {
  components: {
    excel,
  },
  data(){
    return {
      datas:[]
    }
  },
  created() {
    statistics().then(res=>{
      if(res.data){
        // console.log(res.data.resMsg)
        let _data = res.data.resMsg
        this.datas = [
          {
            totalCount: _data.total,
            sameTotal: _data.sameTotal,
            passCount: _data.passCount
          }
        ]
      }
    }).catch(e=>{
      console.log(e)
    })
  },
  methods: {
    handleExcel (datas) {
      let json = datas.map(item => { //将json数据的键名更换成导出时需要的键名
        return {
          '总访问量': item.totalCount,
          '访问人数': item.sameTotal,
          '问卷提交人数': item.passCount
        }
      })
      download(json, '信息统计.xlsx')//导出的文件名
    },
  },
}
</script>

<style lang="scss" scoped>
  .statistics{
    /* display: flex; */
  }
</style>